<!DOCTYPE html>
<html lang="zh-cn">
<head>
    {include file="part/load.phtml"}
</head>

<body>

<section id="container">

    {include file="part/header.phtml"}
    {include file="part/sidebar.phtml"}

    <!-- **********************************************************************************************************************************************************
    MAIN CONTENT
    *********************************************************************************************************************************************************** -->
    <!--main content start-->
    <section id="main-content">
        <section class="wrapper site-min-height">
            <!--            <h3><i class="fa fa-angle-right"></i> Blank Page</h3>-->

            <div class="mt">
                <!--                <div class="col-lg-12">-->
                <!--                    <p>Place your content here.</p>-->
                <!--                </div>-->
                <div id="toolbar">
                    <button id="btn_add" class="btn btn-success">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <button id="btn_mod" class="btn btn-info">
                        <i class="glyphicon glyphicon-edit"></i> 修改
                    </button>
                    <button id="btn_del" class="btn btn-danger">
                        <i class="glyphicon glyphicon-remove"></i> 删除
                    </button>
                </div>
                <table id="table"
                       data-toolbar="#toolbar"
                       data-search="true"
                       data-show-refresh="true"
                       data-show-columns="true"
                       data-show-export="true"
                       data-striped="true"
                       data-detail-formatter="detailFormatter"
                       data-minimum-count-columns="2"
                       data-show-pagination-switch="true"
                       data-pagination="true"
                       data-id-field="id"
                       data-page-list="[10, 25, 50, 100, ALL]"
                       data-side-pagination="client"
                       data-url="/food/apis/getAllFood"
                       data-click-to-select="true">
                </table>
                <!--                <div class="col-lg-12" id="query">-->
                <!--                    <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">-->
                <!--                        <div class="form-group">-->
                <!--                            <label for="orgCode">部门:</label>-->
                <!--                            <select class="form-control" id="orgCode" name="orgCode">-->
                <!--                                <option value="">默认选择</option>-->
                <!--                            </select>-->
                <!--                        </div>-->
                <!--                        <div class="form-group">-->
                <!--                            <label for="userName">名称:</label>-->
                <!--                            <input type="text" class="form-control" name="userName" id="userName"  placeholder="请输入名称">-->
                <!--                        </div>-->
                <!--                        <div class="form-group">-->
                <!--                            <label >日期:</label>-->
                <!--                            <input placeholder="开始日期" class="form-control layer-date" id="startDate" name="startDate">-->
                <!--                            <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate">-->
                <!--                        </div>-->
                <!--                        <div class="form-group">-->
                <!--                            <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>-->
                <!--                        </div>-->
                <!--                        <div class="form-group btn-right">-->
                <!--                            <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button>-->
                <!--                        </div>-->
                <!--                    </form>-->
                <!--                </div>-->
                <!--                <div class="container" style="width: 100%">-->
                <!--                    <table id="demo-table">-->
                <!--                    </table>-->
                <!--                </div>-->
            </div>

        </section>
        <! --/wrapper -->
    </section>
    <!-- /MAIN CONTENT -->

    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
        <div class="text-center">
            华北电力大学后勤集团 版权所有 @2017-2020
            <a href="#" class="go-top">
                <i class="fa fa-angle-up"></i>
            </a>
        </div>
    </footer>
    <!--footer end-->
</section>

{include file="part/footer.phtml"}

<!--script for this page-->

<script>
    var types = []
    var typeArr = [];
    <?php
    $str = json_encode($types);
    echo "types = " . $str ?>

    types.forEach(function (obj) {
        typeArr[obj.type_id] = obj;
    })

    $(document).ready(function () {
        initTable();
//        initDate();
    });

    function doRefresh() {
        $('#table').bootstrapTable('refresh');    //刷新表格
    }

    function initTable() {
        $('#table').bootstrapTable({
            columns: [{
                checkbox: true
            },
                {
                    field: 'food_id',
                    title: 'ID',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return value;
                    }
                },
                {
                    field: 'type_id',
                    title: '分类',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return typeArr[value].type_name;
                    }
                }, {
                    field: 'food_name',
                    title: '名称',
                    align: 'center'
                }, {
                    field: 'food_sold',
                    title: '已售',
                    align: 'center'
                }, {
                    field: 'food_price',
                    title: '价格',
                    align: 'center'
                }, {
                    field: 'food_pic',
                    title: '图片',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return "<img src='" + value + "' style=\"width: 160px;height: 125px\">";
                    }
                }, {
                    field: 'food_detail',
                    title: '详情',
                    align: 'center'
                }, {
                    field: 'food_ctime',
                    title: '创建时间',
                    align: 'center'
                }, {
                    field: 'food_utime',
                    title: '修改时间',
                    align: 'center'
                }, {
                    field: 'food_note',
                    title: '备注',
                    align: 'center'
                }]
        });
        var formStr = '<form>' +
            '<table class="table text-center center-vertical"> <tbody> ' +
//            '<tr> <td>分类</td> <td><input id="type" type="number" placeholder="请输入分类ID"> </td> </tr>' +

                '<tr><td>分类</td> <td><select id="type" class="form-control">' +
                <?php foreach ($types as $type){ ?>
            '<option value="{$type['type_id']}">{$type['type_name']}</option>' +
                <?php } ?>
            '</select></td> </tr>' +


            '<tr> <td>名称</td> <td><input id="name" class="form-control" type="text"> </td> </tr>' +
            '<tr> <td>价格</td> <td><input id="price" class="form-control" type="number"> </td> </tr>' +
            '<tr> <td>详情</td> <td><input id="detail" class="form-control" type="text"> </td> </tr>' +
            '<tr> <td>图片</td> <td><input id="image" class="form-control" type="file"> </td> </tr>' +
            '<tr> <td>备注</td> <td><input id="note" class="form-control" type="text"> </td> </tr>' +
            '</tbody> </table> </form>';
        //添加
        $("#btn_add").click(function () {
            gDialog.fForm('请添加菜品信息', '', formStr, function () {
                var type = $('#type').val();
                var name = $('#name').val();
                var price = $('#price').val();
                var detail = $('#detail').val();
                var note = $('#note').val();
                if (type == null) {
                    gDialog.fAlert('分类不能为空！');
                    return;
                } else if (name == null) {
                    gDialog.fAlert('名称不能为空！');
                    return;
                } else if (price == null) {
                    gDialog.fAlert('价格不能为空！');
                    return;
                } else if (detail == null) {
                    gDialog.fAlert('价格不能为空！');
                    return;
                }
                var formData = new FormData();
                formData.append("type", type);
                formData.append("name", name);
                formData.append("price", price);
                formData.append("detail", detail);
                formData.append("note", note);
                var image = document.getElementById('image').files[0];
                var imgName = $('#image').val();
                if (image == null) {
                    gDialog.fAlert('图片不能为空！');
                    return;
                } else {
                    if (imgName != "") {
                        formData.append("image", image);
                    }
                }
                $.ajax({
                    type: 'POST',
                    url: '/food/apis/addFood',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        console.log(res);
                        if (res > 0) {
                            gDialog.fTip('添加数据', '添加成功！', function () {
                                doRefresh()
                            });
                        } else {
                            gDialog.fTip('添加数据', '添加失败！' + res);
                        }
                    },
                    fail: function (res) {
                        console.log(res);
                        gDialog.fTip('添加数据', '添加失败！');
                    }
                });
            });
        });

        //修改
        $("#btn_mod").click(function () {
            var obj = eval(($('#table').bootstrapTable('getSelections')));
            console.log(obj);
            var formStr2 = '<form>' +
                '<table class="table text-center center-vertical"> <tbody> ' +
                '<tr> <td>分类</td> <td><input id="type" class="form-control" type="number" value=' + obj[0].type_id + '> </td> </tr>' +
                '<tr> <td>名称</td> <td><input id="name" class="form-control" type="text" value=' + obj[0].food_name + '> </td> </tr>' +
                '<tr> <td>价格</td> <td><input id="price" class="form-control" type="number" value=' + obj[0].food_price + '> </td> </tr>' +
                '<tr> <td>详情</td> <td><input id="detail" class="form-control" type="text" value=' + obj[0].food_detail + '> </td> </tr>' +
                '<tr> <td>图片</td> <td><input id="image" class="form-control" type="file" value=' + obj[0].food_pic + '> </td> </tr>' +
                '<tr> <td>备注</td> <td><input id="note" class="form-control" type="text" value=' + obj[0].food_note + '> </td> </tr>' +
                '</tbody> </table> </form>';
            var num = JSONLength(obj);
            if (num == 1) {
                gDialog.fForm('请添加菜品信息', '', formStr2, function () {
                    var type = $('#type').val();
                    var name = $('#name').val();
                    var price = $('#price').val();
                    var detail = $('#detail').val();
                    var note = $('#note').val();
                    if (type == null) {
                        gDialog.fAlert('分类不能为空！');
                        return;
                    } else if (name == null) {
                        gDialog.fAlert('名称不能为空！');
                        return;
                    } else if (price == null) {
                        gDialog.fAlert('价格不能为空！');
                        return;
                    } else if (detail == null) {
                        gDialog.fAlert('价格不能为空！');
                        return;
                    }
                    var formData = new FormData();
                    formData.append("id", obj[0].food_id);
                    formData.append("type", type);
                    formData.append("name", name);
                    formData.append("price", price);
                    formData.append("detail", detail);
                    formData.append("note", note);
                    var image = document.getElementById('image').files[0];
                    var imgName = $('#image').val();
                    if (image == null) {
                        gDialog.fAlert('图片不能为空！');
                        return;
                    } else {
                        if (imgName != "") {
                            formData.append("image", image);
                        }
                    }
                    $.ajax({
                        type: 'POST',
                        url: '/food/apis/upFoodById',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                            console.log(res);
                            if (res > 0) {
                                gDialog.fTip('修改数据', '修改成功！', function () {
                                    doRefresh()
                                });
                            } else {
                                gDialog.fTip('修改数据', '修改失败！' + res);
                            }
                        },
                        fail: function (res) {
                            console.log(res);
                            gDialog.fTip('修改数据', '修改失败！');
                        }
                    });
                });
            } else {
                gDialog.fTip('修改数据', '只能选择1条数据！');
            }
        });

        //删除
        $("#btn_del").click(function () {
            var obj = eval(($('#table').bootstrapTable('getSelections')));
            var num = JSONLength(obj);
            var idArr = [];
            if (num > 0) {
                for (var i = 0; i < num; i++) {
                    idArr.push(obj[i].food_id);
                }
                console.log(idArr);
                gDialog.fConfirm('删除数据', '您将删除选中数据？', function () {
                    $.ajax({
                        food: 'POST',
                        url: '/food/apis/delFoodById',
                        data: {
                            id: idArr
                        },
                        success: function (res) {
                            console.log(res);
                            if (res > 0) {
                                gDialog.fTip('删除数据', '删除成功！', function () {
                                    doRefresh();
                                });
                            } else {
                                gDialog.fTip('删除数据', '删除失败！');
                            }
                        },
                        fail: function (res) {
                            console.log(res);
                        }
                    });
                });
            } else {
                gDialog.fTip('删除数据', '请至少选择1条数据！');
            }

        });
    }

    //获取json对象数量
    function JSONLength(obj) {
        var size = 0, key;
        var userID;
        for (key in obj) {
            if (obj.hasOwnProperty(key)) size++;
        }
        return size;
    }
    ;
    //    function initDate(){
    //        var start = {
    //            elem: '#startDate',
    //            format: 'YYYY-MM-DD hh:mm:ss',
    //            min: laydate.now(-7),
    //            max: laydate.now(),
    //            istime: true,
    //            istoday: false,
    //            choose: function (datas) {
    //                end.min = datas; //开始日选好后，重置结束日的最小日期
    //                end.start = datas //将结束日的初始值设定为开始日
    //            }
    //        };
    //        var end = {
    //            elem: '#endDate',
    //            format: 'YYYY-MM-DD hh:mm:ss',
    //            min: laydate.now(-7),
    //            max: laydate.now(),
    //            istime: true, //是否开启时间选择
    //            isclear: true, //是否显示清空
    //            istoday: true, //是否显示今天
    //            issure: true, //是否显示确认
    //            choose: function (datas) {
    //                start.max = datas; //结束日选好后，重置开始日的最大日期
    //            }
    //        };
    //        laydate(start);
    //        laydate(end);
    //    }
    //
    function queryParams(params) {
        var param = {
            orgCode: $("#orgCode").val(),
            userName: $("#userName").val(),
            startDate: $("#startDate").val(),
            endDate: $("#endDate").val(),
            limit: this.limit, // 页面大小
            offset: this.offset, // 页码
            pageindex: this.pageNumber,
            pageSize: this.pageSize
        }
        return param;
    }

    // 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了，
    function responseHandler(res) {
        if (res) {
            return {
                "rows": res.result,
                "total": res.totalCount
            };
        } else {
            return {
                "rows": [],
                "total": 0
            };
        }
    }

</script>
</body>
</html>
